import { MoreOutline } from 'antd-mobile-icons'
import useChangePlayList from '../../../../hooks/useChangePlayList';
import { playlistType } from '../../../../config/playList'
import { IsongDataItem } from '../../../../api/api/selectPageList/type';
interface SongListProps {
    className?: string;
    songListData: IsongDataItem[];
    playingId: string;
    listId: string;
}
function TopSongList({
    className = '',
    songListData,
    playingId,
    listId,
}: SongListProps) {
    const {
        handlePlaySong,
    } = useChangePlayList({
        songListData,
        playingId,
        listType: playlistType.PLAY_LIST_TYPE_TOPLIST,
        listId,
    });
    return (
        <div className={`w-[342px] m-[0 auto] ${className}`}>
            {
                songListData && songListData.map((songData, index) => {
                    return (
                        <div className={`h-74[px] flex text-[14px] relative align-center mb-[16px] ${playingId == songData.id ? 'text-green-500' : ''}`} onClick={() => handlePlaySong(songData.id)} key={songData.id}>
                            <div className="w-[70px] h-[70px] rounded-[10px] mr-[16px]">
                                <img className="object-cover size-[100%] rounded-[10px]" src={songData?.src}></img>
                            </div>
                            <div className="w-[102px] ft">
                                <div>{`#${index + 1}`}</div>
                                <span className="font-semibold">{songData?.title}</span>
                                <div className="text-[12px]">{songData?.artist}</div>
                            </div>
                            <MoreOutline className='absolute right-0 size-[26px] top-[14px] text-white'></MoreOutline>
                        </div>
                    )
                })
            }
        </div >
    )
}

export default TopSongList;